<template>
    <div class="app-container">
        <el-card shadow="always">
            <template #header>
                <div class="card-header" @click="goBack">
                    <el-icon>
                        <Back />
                    </el-icon>
                    返回
                </div>
            </template>
            <el-row :gutter="20">
                <el-col :span="5" class="center-col">
                    <div class="statistic-card">
                        <el-statistic title="健康度总分" :value="formData.total" />
                        <div class="statistic-footer">
                            <div class="footer-item">
                                <span>数据时间：{{ route.query.insertTime }}</span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="19">
                    <el-descriptions :title="formData.neName">
                        <el-descriptions-item label="所属区县">{{ formData.county }}</el-descriptions-item>
                        <el-descriptions-item label="CGI">{{ formData.cgi }}</el-descriptions-item>
                        <el-descriptions-item label="小区名称">{{ formData.neName }}</el-descriptions-item>
                    </el-descriptions>
                </el-col>
            </el-row>
        </el-card>
        <el-row :gutter="20" style="margin-top: 10px">
            <el-col :span="8">
                <el-card shadow="always" class="detail-card">
                    <div>
                        <div class="center-col">
                            <p style="font-size: 20px;font-weight: bolder;">基站环境评分:{{ formData.env }}</p>
                        </div>
                        <el-table v-loading="loading" :data="formatTableData(formData.envDetail)" :height="300" stripe
                            style="width: 100%;margin-top: 10px;">
                            <el-table-column prop="key" label="类别" width="200" :formatter="formatEnvCell"
                                align="center" />
                            <el-table-column prop="value" label="得分" align="center" />
                        </el-table>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="always" class="detail-card">
                    <div id='echart' style="width: 100%;height:300px"></div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="always" class="detail-card">
                    <div class="center-col">
                        <p style="font-size: 20px;font-weight: bolder;">故障告警评分:{{ formData.alarm }}</p>
                    </div>
                    <el-table v-loading="loading" :data="formatTableData(formData.alarmDetail)" :height="300" stripe
                        style="width: 100%;margin-top: 10px;">
                        <el-table-column prop="key" label="类别" width="200" align="center"
                            :formatter="formatAlarmCell" />
                        <el-table-column prop="value" label="数量" align="center" />
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="always" class="detail-card">
                    <div class="center-col">
                        <p style="font-size: 20px;font-weight: bolder;">站点价值评分:{{ formData.profit }}</p>
                    </div>
                    <el-table v-loading="loading" :data="formatTableData(formData.profitDetail)" :height="300" stripe
                        style="width: 100%;margin-top: 10px;">
                        <el-table-column prop="key" label="类别" width="200" align="center"
                            :formatter="formatProfitCell" />
                        <el-table-column prop="value" label="得分" align="center" />
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="always" class="detail-card">
                    <div class="center-col">
                        <p style="font-size: 20px;font-weight: bolder;">用户感知评分:{{ formData.perception }}</p>
                    </div>
                    <el-table v-loading="loading" :data="formatTableData(formData.perceptionDetail)" :height="300"
                        stripe style="width: 100%;margin-top: 10px;">
                        <el-table-column prop="key" label="类别" width="200" align="center"
                            :formatter="formatPerceptionCell" />
                        <el-table-column prop="value" label="得分" align="center" />
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="always" class="detail-card">
                    <div class="center-col">
                        <p style="font-size: 20px;font-weight: bolder;">网络质量评分:{{ formData.quality }}</p>
                    </div>
                    <el-table v-loading="loading" :data="formatTableData(formData.qualityDetail)" :height="300" stripe
                        style="width: 100%;margin-top: 10px">
                        <el-table-column prop="key" label="类别" width="200" align="center"
                            :formatter="formatQualityCell" />
                        <el-table-column prop="value" label="得分" align="center" />
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup name="stationHealthDetail">
import * as echarts from 'echarts'
import { queryStationSummaryList, queryStationSummary } from '@/api/biz/stationHealth';

const route = useRoute();
const router = useRouter();
const formData = ref({})

const queryParams = ref(
    {
        cgi: route.query.cgi,
        insertTime: route.query.insertTime
    }
)

function querySummary() {
    let param = queryParams.value
    queryStationSummary(param).then(res => {
        formData.value = res.data
        initChart()

    })
}

function goBack() {
    router.push('stationHealth')
}

function initChart() {
    var mCharts = echarts.init(document.getElementById("echart"))
    // 2. 各个维度的最大值
    var dataMax = [
        {
            name: '基站环境',
            max: 100
        },
        {
            name: '故障告警',
            max: 100
        },
        {
            name: '站点价值',
            max: 100
        },
        {
            name: '用户感知',
            max: 100
        },
        {
            name: '网络质量',
            max: 100
        }
    ]

    let temp = formData.value
    var score = [temp.env, temp.alarm, temp.profit, temp.perception, temp.quality]
    var option = {
        radar: {
            indicator: dataMax, // 配置各个维度的最大值     
        },
        series: [
            {
                type: 'radar', // 4. radar 此图表时一个雷达图
                data: [
                    {
                        name: '健康度',
                        value: score
                    }
                ]
            }
        ]
    }
    mCharts.setOption(option)
}

function formatTableData(detail) {
    let data = []
    if (detail) {
        var jsonObject = JSON.parse(detail);
        if (jsonObject) {
            Object.keys(jsonObject).forEach(key => {
                // 执行相应的操作，例如打印属性名和属性值
                console.log(key, jsonObject[key]);
                var item = {
                    key: key,
                    value: jsonObject[key]
                }
                data.push(item)
            });
        }
    }
    return data;
}

function formatEnvCell(row, column, cellValue, index) {
    if (!cellValue) { return }
    switch (cellValue) {
        case 'securityLevel': return '安全等级'
            break
        case 'inletRisk': return '台风进水风险'
            break
        case 'lyStation': return '是否拉远'
            break
        case 'electricGeneration': return '发电条件'
            break
        case 'transmitType': return '传输是否成环'
            break
        case 'batteryDuration': return '蓄电池配置'
            break
        case 'airconditionerStatus': return '空调状态'
            break
    }
}

function formatAlarmCell(row, column, cellValue, index) {
    if (!cellValue) { return }
    switch (cellValue) {
        case 'realTimeCount': return '实时告警数量'
            break
        case 'historyAlarmCount': return '历史十日告警数量'
            break
    }
}

function formatQualityCell(row, column, cellValue, index) {
    if (!cellValue) { return }
    switch (cellValue) {
        case 'perceptionScore': return '感知维度分数'
            break
        case 'flowScore': return '流量维度分数'
            break
        case 'capacityScore': return '容量维度分数'
            break
        case 'coverageScore': return '覆盖维度分数'
            break
        case 'interferenceScore': return '干扰维度分数'
            break
        case 'structureScore': return '结构维度分数'
            break
        case 'performanceScore': return '性能维度分数'
            break
    }
}

function formatProfitCell(row, column, cellValue, index) {
    if (!cellValue) { return }
    switch (cellValue) {
        case 'sceneInfluence': return '社会影响系数'
            break
        case 'activeUserNum': return '常驻用户数'
            break
        case 'ARPU': return 'ARPU'
            break
        case 'coverageScene': return '覆盖场景'
            break
        case 'economicValue': return '经济价值'
            break
        case 'flow': return '总流量'
            break
    }
}

function formatPerceptionCell(row, column, cellValue, index) {
    if (!cellValue) { return }
    switch (cellValue) {
        case 'complaintNum': return '投诉数量'
            break
        case 'satisfaction': return '用户满意度'
            break
    }
}

onMounted(() => {

})

querySummary();


</script>

<style lang='scss' scoped>
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.chart {
    width: 2400px;
    height: 1400px;
}

.center-col {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    height: 100%;
    /* 确保列有高度，否则垂直居中可能不起作用 */
}

.el-statistic {
    --el-statistic-content-font-size: 35px;
}

.detail-card {
    height: 350px;
}

.statistic-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--el-text-color-regular);
    margin-top: 16px;
}

.statistic-footer .footer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
